<div class="fui-select-head" [class.search]="allowSearch" (click)="clickHead()">
  <input
    #inputElement
    *ngIf="allowSearch"
    [class.disabled]="disabled || readonly"
    [readonly]="disabled || readonly"
    (compositionstart)="isComposing = true"
    (compositionend)="isComposing = false"
    [(ngModel)]="searchFilter"
  >
  <div
    class="fui-select-label"
    [class.search]="allowSearch"
    [class.mute]="allowSearch && (visible | async)"
    *ngIf="store.hasSelected && !searchFilter && !isComposing"
  >
    <span class="fui-select-label-text">{{store.selectedLabel}}</span>
  </div>
  <div
    class="fui-select-placeholder"
    [class.search]="allowSearch"
    *ngIf="!store.hasSelected && !searchFilter && !isComposing"
  >
    {{placeholder}}
  </div>
  <svg
    [class.hover-hide]="allowClear && store.hasSelected"
    [fuiIcon]="toggleIcon()"
    size="sm"
    color="secondary"
  ></svg>
  <span
    class="fui-select-head-remove"
    *ngIf="allowClear && store.hasSelected"
    (click)="clear($event)"
  >
    <svg
      fuiIcon="cross-circle"
      size="sm"
    ></svg>
  </span>
</div>

<ng-template
  cdkConnectedOverlay
  cdkConnectedOverlayBackdropClass="fui-select-backdrop"
  [cdkConnectedOverlayOrigin]="overlayOrigin"
  [cdkConnectedOverlayHasBackdrop]="true"
  (backdropClick)="hide()"
  (detach)="hide()"
  (positionChange)="onPositionChange($event)"
  [cdkConnectedOverlayPositions]="positions"
  [cdkConnectedOverlayOpen]="visible | async"
>
  <ng-container *ngIf="!loading; else loadingTemplate">
    <div
      #fuiSelectOptions
      class="fui-select-options"
      *ngIf="store.optionCount"
      [style.width.px]="hostWidth"
      [@showHide]="visible | async"
    >
      <ng-content *ngIf="!allowSearch else searchOption"></ng-content>
      <ng-template #searchOption>
        <ng-container *ngIf="!searchFilter">
          <template [ngTemplateOutlet]="optionAllComponent && optionAllComponent.template"></template>
        </ng-container>
        <fui-select-option-item
          *ngFor="let option of optionListComponent | fuiSelectOptionFilterPipe : searchFilter : searchKey"
          [selectOption]="option"
        ></fui-select-option-item>
      </ng-template>
    </div>
    <div
      #fuiSelectNoOptions
      class="fui-select-no-options"
      *ngIf="!store.optionCount"
      [style.width.px]="hostWidth"
      [@showHide]="visible | async"
    >
      <div class="fui-select-option">{{'fui.SELECT.NO_OPTIONS' | translate}}</div>
    </div>
  </ng-container>
  <ng-template #loadingTemplate>
    <div
      #fuiSelectNoOptions
      class="fui-select-loading-options"
      [style.width.px]="hostWidth"
    >
      <div class="fui-select-option fui-select-loading">
        <svg fuiIcon="loading" color="secondary" class="fui-rotate"></svg>
        {{'fui.SELECT.LOADING_OPTIONS' | translate}}
      </div>
    </div>
  </ng-template>
</ng-template>
